<template>
  <div class="ts-avatar">
    <vueCropper
      ref="cropper3"
      :img="config.img"
      :autoCrop="config.autoCrop"
      :autoCropWidth="config.autoCropWidth"
      :autoCropHeight="config.autoCropHeight"
      :fixedBox="config.fixedBox"></vueCropper>
    <div class="chooseImg">
      <div class="pic" @click="$router.goBack()">
        <svg width="30" height="30">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cancel-default"></use>
        </svg>
      </div>
      <div class="pic" @click="finishCrop">
        <svg width="30" height="30">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ok-default"></use>
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
  import vueCropper from 'vue-cropper'
  import {SET_CROP_INFO} from '../../../../store/mutations-types'

  export default {
    data: function () {
      return {
        config: {
          outputType: 'jpeg',
          img: '',
          autoCrop: true,
          autoCropWidth: 200,
          autoCropHeight: 200,
          fixedBox: true
        }
      }
    },
    created() {
      this.config.img = this.$route.params.noCropAvatar;
    },
    methods: {
      finishCrop(type) {
        this.$refs.cropper3.getCropData((cropAvatar) => {
          this.$router.isBack = true;
          this.$emit('cropFinish', cropAvatar);
          this.$router.replace({name: 'info'});
        })
      }
    },
    components: {
      vueCropper
    },
  }
</script>

<style lang="scss" scoped>

  .ts-avatar {
    overflow: hidden;
  }

  .vue-cropper {
    background: #000 none;
  }

  .chooseImg {
    overflow: hidden;
    padding: .25rem .25rem;
    position: absolute;
    z-index: 2000;
    bottom: 0;
    width: 100%;
    display: flex;
    .pic:first-child {
      flex: 1
    }
  }
</style>
